<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>极客园</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        margin: 0 auto;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
      }

      .container .left {
        margin-right: 10px;
      }

      .container .left,
      .container .right {
        position: relative;
        transform: scale(0.9);
      }

      .init,
      .break {
        font-size: 16px;
        text-align: center;
        color: #999;
        padding: 3px 0;
      }

      body {
        background-color: #f4f4f4;
      }

      .left img {
        margin-top: 0px;
      }

      .left .slide {
        animation: toTop linear 1s;
      }

      .toBig {
        animation: toBig linear 0.5s;
      }

      .codeview {
        position: absolute;
        width: 362px;
        height: 640px;
        background-color: #fff;
        left: 24px;
        top: 99px;
      }
      #code_message {
        overflow: auto;
      }
      #code_message .message {
        margin: 20px;
        background-color: #f3f3f3;
        padding: 10px;
        line-height: 30px;
        border-radius: 20px;
      }
      #code_message .message a,
      #code_message .message b {
        color: blue;
      }
      .back {
        width: 100%;
        height: 100%;
        background: pink;
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .back .btn {
        width: 280px;
        height: 80px;
        user-select: none;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        line-height: 80px;
        font-size: 30px;
        color: #fff;
        background-color: #409eff;
      }

      .back .title {
        margin-bottom: 200px;
        font-size: 60px;
      }
      .sendcode {
        top: 200px;
        width: 280px;
        height: 60px;
        user-select: none;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        line-height: 60px;
        font-size: 20px;
        color: #fff;
        background-color: #409eff;
        margin-bottom: 20px;
      }
      a {
        color: blue;
      }
      .current {
        font-size: 20px;
        color: #241ab4;
        text-align: center;
        height: 60px;
        line-height: 60px;
      }

      @keyframes toTop {
        0% {
          margin-top: 100px;
        }

        100% {
          margin-top: 0;
        }
      }

      @keyframes toBig {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @media screen and (max-width: 768px) {
        .layui-nav {
          display: none;
        }

        .back .title {
          font-size: 30px;
        }

        .sendcode {
          width: 80%;
          height: 40px;
          display: inline-block;
          line-height: 40px;
          font-size: 20px;
          margin-left: 10%;
        }

        #left_img {
          display: none;
        }

        .codeview {
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          position: fixed;
          margin: 0;
          top: 0;
        }
		.my_chart {
		  display: none;
		}
      }

      .my_chart {
        position: absolute;
        left: 30px;
        top: 200px;
      }
    </style>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
  </head>

  <body>
    <!-- 用作新消息提示 -->
    <audio
      id="msgVoice"
      src="./audio/message.mp3"
      autoplay
      style="display: none"
    ></audio>
    <button
      id="btnVoice"
      onclick="playVoice()"
      style="opacity: 0; display: none"
    ></button>
    <ul class="layui-nav" lay-filter="">
      <li class="layui-nav-item"><a href="/api.html">移动端接口文档</a></li>
      <li class="layui-nav-item"><a href="/api-pc.html">PC端接口文档</a></li>
      <li class="layui-nav-item">
        <a href="/react/index.html#/zh-CN">React开发</a>
      </li>
      <li class="layui-nav-item">
        <a href="http://geek.itheima.net/document">Vue开发</a>
      </li>
    </ul>
    <div class="my_chart">
      <div onclick="sendCode()" class="sendcode">测试发送短信验证码</div>
      <div id="allCount" class="current">总访问：0次</div>
      <!-- <div id="chart" style="height: 400px; width: 800px"></div> -->
      <div id="current" class="current">实时在线：0人</div>
    </div>
    <div class="container">
      <div class="left">
        <!-- 短信验证平台 -->
        <div id="code_message" class="codeview"></div>
        <img id="left_img" class="slide" src="./images/phone.jpg" alt="" />
      </div>
      <div class="right">
        <div class="codeview">
          <iframe
            src="./dist/index.html"
            width="100%"
            height="100%"
            frameborder="0"
          ></iframe>
        </div>
        <img src="./images/phone.jpg" alt="" />
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/js/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script>
      var msgDom = $("#code_message"); // 消息列表
      var msgList = []; // 消息列表
      var socket = null; // 初始socket对象
      var changeVoice = false;
      var initSocket = function () {
        socket = io("/?key=hmlgnb", { transports: ["websocket"] }); // 创建连接 创建连接写入秘钥
        socket.on("connect", function () {
          console.log("连接建立成功");
          addMesasge("init", "与服务器建立通讯！");
        });
        socket.on("disconnect", function () {
          console.log("连接断开");
          addMesasge("break", "与服务器通讯中断！");
        });
        socket.on("message", function (data) {
          addMesasge("message", data);
          renderList();
          $("#btnVoice").trigger("click");
        });
        socket.on("current", function (data) {
          $("#current").text("实时在线：" + data + "人");
        });
        socket.on("toOther", function (data) {
          addMesasge("message", data);
          renderList();
        });
      };
      // 添加内容到消息区
      var addMesasge = function (type, message) {
        msgList.push({ type, message });
        renderList();
      };
      // 渲染list到消息列表
      var renderList = function () {
        var listStr = msgList.map(function (item) {
          if (item.type === "init") {
            return `<div class='init'>${item.message}</div>`;
          } else if (item.type === "break") {
            return `<div class='break'>${item.message}</div>`;
          } else if (item.type === "message") {
            return `<div class='message'>${item.message}</div>`;
          }
        });
        var height = msgDom[0].scrollHeight;
        msgDom.html(listStr.join(""));
        msgDom[0].scrollTop = height; // 滚动到底部
      };

      var copyValue = function (dom) {
        let transfer = document.createElement("input");
        document.body.appendChild(transfer);
        transfer.value = dom.innerText; // 这里表示想要复制的内容
        transfer.focus();
        transfer.select();
        //  transfer.style.display = 'none'
        document.execCommand("Copy");
        transfer.remove();
      };
      var play = function () {
        $("#btnVoice").trigger("click");
      };
      var playVoice = function () {
        $("#msgVoice")[0].play();
      };

      function closewelcome() {
        $("#code_message").hide();
        setTimeout(() => {
          $("#code_message").show();
          $("#code_message").addClass("toBig");
        }, 1000);
      }
      // 发送验证码
      function sendCode() {
        $.ajax({
          url: `/v1_0/sms/codes/13811111111`,
          success: function (data) {},
          error: function ({ responseJSON }) {
            alert(responseJSON.message);
          },
        });
      }
      initSocket(); // 初始化websocket
      closewelcome();
    </script>
    <script type="text/javascript">
      function initChart() {
        // 基于准备好的dom，初始化echarts实例
        // var myChart = echarts.init(document.getElementById("chart"));
        var callData = function () {
          $.ajax({
            url: "/api_count",
            success: function (data) {
              var allCount = data.allCount;
              // var result = data.result;
              // var valuelist = result.map(function (item) {
              //   return item.api_count;
              // });
              // var obj = {};
              // result.forEach(function (item) {
              //   var time = item._id
              //     .split(" ")[1]
              //     .split(":")
              //     .slice(0, 2)
              //     .join(":");
              //   if (obj[time]) {
              //     obj[time]++;
              //   } else {
              //     obj[time] = 1;
              //   }
              // });
              document.getElementById("allCount").innerText =
                "总访问:" + allCount + "次";
              // myChart.setOption({
              //   xAxis: {
              //     type: "category",
              //     data: Object.keys(obj),
              //   },
              //   yAxis: {
              //     type: "value",
              //   },
              //   series: [
              //     {
              //       data: Object.values(obj),
              //       type: "line",
              //       smooth: true,
              //     },
              //   ],
              // });
            },
          });
        };
        setInterval(callData, 5000);
      }
      initChart();
    </script>
  </body>
</html>
